<template>
	<div class="Z_main">
		<div class="top">
			<h5>课程管理 / 活动管理</h5>
		</div>
		<div class="nav">
			<h4>订单筛选</h4>
			<div class="nav_wrap">
				<span class="r-38">上架状态</span>
				<el-select v-model="value" class="m-2 select r-38" placeholder="Select">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
						:disabled="item.disabled" v-model="sech.sechOne" />
				</el-select>
				<span class="r-38">上传时间</span>
				<span>
					<el-date-picker v-model="sech.sechTwo" type="datetimerange" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" @change="getList"
						:disabledDate="disablesDate" />
				</span>
				<span class="l-38 r-38">
					<input type="text" class="ipt" v-model="sech.sechThree" placeholder="请输入订单号,用户账号,昵称">
				</span>
				<div class="icon">
					<span class="img">
						<img src="../assets/pict.png" />
					</span>
					<span class="icon-p" @click="sech_data()">筛选</span>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="p">
				<h4>课程列表</h4>
				<button @click="jumpAddClass()">添加课程</button>
			</div>
			<ul class="list">
				<li></li>
				<li>编号</li>
				<li>名称</li>
				<li>封面</li>
				<li>状态</li>
				<li>价格</li>
				<li>销量</li>
				<li>上传人</li>
				<li>上传时间</li>
				<li>操作</li>
			</ul>
			<div v-for="(item, index) in person">
				<ul class="list-content">
					<li><input type="checkbox"></li>
					<li>{{ index + 1 }}</li>
					<li>{{ item.name }}</li>
					<li class="image"><img :src="item.cover" alt=""></li>
					<li>{{ item.state_s }}</li>
					<li>{{ item.price }}</li>
					<li>{{ item.serial_number }}</li>
					<li>郭朝鹏</li>
					<li>{{ item.up_tim }}</li>
					<li class="operate">
						<button @click="jumpSechClass(index)">编辑</button>
						<button>下架</button>
						<button @click="del_data(index)">删除</button>
					</li>
					
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import { ref } from 'vue'
import { getClassCourse, delClassCourse, sechClassCourse } from '../api/api.js'
export default {
	setup() {
		const value = ref('')
		const person = ref([])
		const pict = ref({})
		const sech = ref({
			sechOne: '',
			sechTwo: '',
			sechThree: ''
		})
		const options = [
			{
				value: '未上架',
				label: '未上架',
			},
			{
				value: '上架',
				label: '上架',
			},
		]
		const person_info = ref({})
		return {
			value,
			options,
			person,
			pict,
			sech,
			person_info
		}
	},
	disablesDate(time) {
		const _minTime = Date.now() + 24 * 60 * 60 * 1000 * 7 //最小时间可选前七天
		const _maxTime = Date.now() - 24 * 60 * 60 * 1000 * 1 //最大时间可选今天
		return time.getTime() <= _maxTime || time.getTime() > _minTime
	},
	mounted() {
		this.getAll();
	},
	methods: {
		// 跳转
		jumpAddClass() {
			this.$router.push('/addClassCoure')
		},
		jumpSechClass(index) {
			this.$router.push({
				name: 'addClassCoure',
				params: this.person[index]
			})
			// console.log(this.person[index]);
		},
		// 添加
		getAll(index) {
			getClassCourse()
				.then(res => {
					this.person = res.data.list
					console.log(this.person)
					this.pict = this.person[0].cover
					// console.log(this.person[0].cover)
					// console.log(this.pict)
				})
				.catch(err => {
					console.log(err)
				})
		},
		// 删除
		del_data(index) {
			console.log(index)
			const serNum = this.person[index].name
			const del_data = { serNum }
			console.log(del_data)
			delClassCourse(del_data)
				.then(res => {
					console.log(res)
					this.getAll()
				})
				.catch(err => {
					console.log(err)
				})
		},
		// 查询
		sech_data() {
			const sech_one = this.sech.sechOne
			const sech_two = this.sech.sechTwo
			const sech_three = this.sech.sechThree
			const each_data = { sech_one, sech_two, sech_three }
			sechClassCourse(each_data)
				.then(res => {
					console.log(res.data)
					this.person = res.data.list
				})
				.catch(err => {
					console.log(err)
				})
		}
	}
}
</script>

<style scoped>
* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.Z_main {
	width: calc(100% - 60px);
	/* height: 100vh; */
	background-color: #f0f0f0;
	padding: 35px 30px;
}

.top {
	margin-bottom: 30px;
}

.bottom {
	width: calc(100% - 60px);
	padding: 0 30px;
	background-color: #fff;
}

.nav {
	width: calc(100% - 60px);
	padding: 30px 30px;
	margin-bottom: 20px;
	background-color: #fff;
}

.nav>h4 {
	margin-bottom: 10px;
}

.nav_wrap {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.bottom {
	height: 600px;
}

.bottom>.p {
	width: 10 0%;
	border-bottom: 1px solid #f0f0f0;
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	padding: 20px 0;
}

.p>button {
	color: #fff;
	font-size: 14px;
	text-align: center;
	background-color: #38a28a;
	border: none;
	width: 90px;
	height: 32px;
	border-radius: 5px;
}

.list {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid #f0f0f0;
}

.list>li {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 3;
	height: 30px;
	padding: 10px 0;
	font-weight: bold;
}

.list>li>input {
	width: 18px;
	height: 18px;
}

.list-content {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid #f0f0f0;
}

.list-content>li {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 3;
	height: 50px;
	padding: 10px 0;
}

.list-content>li:nth-child(1),
.list>li:nth-child(1) {
	flex: 1;
}

.list-content>li>input {
	width: 18px;
	height: 18px;
}

.r-38 {
	margin-right: 38px;
}

.l-38 {
	margin-left: 38px;
}

.select {
	width: 120px !important;
}

.ipt {
	width: 220px;
	height: 28px;
	padding: 0 18px;
	border-radius: 8px;
	outline: none;
	border: 2px solid #dcdfe6;
}

.icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 76px;
	height: 32px;
	background-color: #38a28a;
	border-radius: 5px;
}

.icon-p {
	color: #fff;
	font-size: 12px;
	cursor: pointer;
}

.img {
	width: 20px;
	height: 20px;
}

.img>img {
	width: 100%;
	height: 100%;
}

.operate>button {
	width: 33.33%;
	border: none;
	outline: none;
	background: none;
	text-align: center;
	font-weight: 700;
	cursor: pointer;
}

.image>img {
	width: 100%;
	height: 100%;
}

.operate>button:nth-child(2) {
	color: #38a28a;
}

.operate>button:nth-child(3) {
	color: #f44b35;
}
</style>
